<template>
  <div class="ResultPanel">
    <!-- 司机信息 -->
    <el-card
      v-if="polyInfo"
      class="box-card"
      style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)"
    >
      <div slot="header" class="clearfix" @click="checkDetail('driver')">
        <span>司机信息</span>
        <span class="statusDesc">{{statusMap.driver[polyInfo.driver.driver_status]}}</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="main" v-if="polyInfo.driver && polyInfo.driver.detail">
        <div class="text item">
          <span class="label">司机姓名:</span>
          {{polyInfo.driver.driver_name }}
        </div>
        <div class="text item">
          <span class="label">性别:</span>
          {{polyInfo.driver.detail.json1.Gender}}
        </div>
        <div class="text item">
          <span class="label">民族:</span>
          {{polyInfo.driver.detail.json1.Nationality}}
        </div>
        <div class="text item">
          <span class="label">驾驶证号:</span>
          {{polyInfo.driver.detail.jszh }}
        </div>
        <div class="text item">
          <span class="label">驾驶证到期:</span>
          {{polyInfo.driver.detail.driver_end_date }}
        </div>
        <div class="text item">
          <span class="label">手机号:</span>
          {{polyInfo.driver.detail.tel }}
        </div>
        <div class="text item">
          <span class="label">身份证号:</span>
          {{polyInfo.driver.detail.sfz }}
        </div>

        <div class="text item">
          <span class="label">身份证到期:</span>
          {{polyInfo.driver.detail.id_end_date }}
        </div>
        <div class="text item">
          <span class="label">准驾车型:</span>
          {{polyInfo.driver.detail.json2.VehicleType }}
        </div>
        <div class="text item" style="width: 100%;">
          <!-- IssueUnit -->
          <span class="label">驾驶证发证机关:</span>
          {{polyInfo.driver.detail.IssueUnit }}
        </div>
      </div>
    </el-card>

    <!-- 车辆信息 -->
    <el-card
      v-if="polyInfo && polyInfo.car.length > 0"
      class="box-card"
      style="background:linear-gradient(-113deg,#4169E1,#4169E1)"
    >
      <div slot="header" class="clearfix carHeader" @click="checkDetail('car')">
        <span
          style="flex:1"
        >车辆信息:
        <el-select class="select" v-model="carIndex" placeholder="请选择">
            <el-option
              v-for="(item,index) in polyInfo.car"
              :key="index"
              :label="item.cph"
              :value="index"
            >{{ item.cph }}</el-option>
          </el-select>
        <!-- {{ polyInfo.car[carIndex].cph }}  -->
        
        {{statusMap.car[polyInfo.car[carIndex].car_status] }}</span>
        <div class="switch" v-if="polyInfo.car.length > 1">
          <span class="pointer" @click.stop="changeCarIndex('reduce')"><</span>
          <span>{{ `${carIndex + 1} / ${polyInfo.car.length}` }}</span>
          <span class="pointer" @click.stop="changeCarIndex('add')">></span>
        </div>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div
        class="main"
        v-for="(item,index) in polyInfo.car"
        :key="index"
        v-show="carIndex == index"
      >
        <div class="text item">
          <span class="label">车牌号:</span>
          {{item.cph}}
        </div>
        <div class="text item">
          <span class="label">车架号:</span>
          {{item.detail.car_jh }}
        </div>
        <div class="text item">
          <span class="label">车辆类型:</span>
          {{item.detail.car_lx }}
        </div>
        <div class="text item">
          <span class="label">使用性质:</span>
          {{item.detail.syxz }}
        </div>
        <div class="text item overText">
          <span class="label">车辆品牌:</span>
          <el-tooltip class="item" effect="dark" :content="item.detail.car_pp" placement="top">
            <span>{{item.detail.car_pp }}</span>
          </el-tooltip>
        </div>
        <div class="text item overText">
          <span class="label">车辆所有人:</span>
          <el-tooltip class="item" effect="dark" :content="item.detail.syr" placement="top">
            <span>{{item.detail.syr }}</span>
          </el-tooltip>
        </div>

        <div class="text item">
          <span class="label">载重量:</span>
          {{item.detail.kzz }}
        </div>
        <div class="text item">
          <span class="label">注册日期:</span>
          {{item.detail.RegisterDate }}
        </div>
        <div class="text item">
          <span class="label">道路运输证号:</span>
          {{item.detail.dlys_num }}
        </div>
        <div class="text item">
          <span class="label">状态:</span>
          {{statusMap.car[item.car_status] }}
        </div>
      </div>
    </el-card>

    <!-- 运单信息 -->
    <el-card
      v-if="polyInfo && polyInfo.bill.length > 0"
      class="box-card"
      style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)"
    >
      <div slot="header" class="clearfix carHeader" @click="checkDetail('bill')">
        <span style="flex: 1;">运单信息:
          <el-select style="width: 120px !important;" class="select" v-model="billIndex" placeholder="请选择">
            <el-option
              v-for="(item,index) in polyInfo.bill"
              :key="index"
              :label="`${item.add_id}-${item.id}`"
              :value="index"
            >{{ `${item.add_id}-${item.id}` }}</el-option>
          </el-select>

        </span>
        <span class="statusDesc">{{statusMap.bill[polyInfo.bill[billIndex].status]}}</span>
        <div class="switch" v-if="polyInfo.bill.length > 1">
          <span class="pointer" @click.stop="changeBillIndex('reduce')"><</span>
          <span>{{ `${billIndex + 1} / ${polyInfo.bill.length}` }}</span>
          <span class="pointer" @click.stop="changeBillIndex('add')">></span>
        </div>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div
        class="main"
        v-for="(item,index) in polyInfo.bill"
        :key="index"
        v-show="billIndex == index"
      >
        <div class="text item">
          <span class="label">运单ID:</span>
          {{item.add_id + '-' + item.id }}
        </div>
        <div class="text item">
          <span class="label">车牌号:</span>
          {{item.cph }}
        </div>
        <div class="text item overText">
          <span class="label">公司名称:</span>
          <el-tooltip class="item" effect="dark" :content="item.company" placement="top">
            <span>{{item.company }}</span>
          </el-tooltip>
        </div>
        <div class="text item">
          <span class="label">发货地:</span>
          {{item.ship_address }}
        </div>
        <div class="text item">
          <span class="label">收货地:</span>
          {{item.to_address }}
        </div>
        <div class="text item">
          <span class="label">运费:</span>
          {{item.price }}
        </div>
        <div class="text item">
          <span class="label">开始时间:</span>
          {{item.add_time }}
        </div>
        <div class="text item">
          <span class="label">提货时间:</span>
          {{item.th_time }}
        </div>
        <div class="text item">
          <span class="label">卸货时间:</span>
          {{item.dd_time }}
        </div>
        <div class="text item">
          <span class="label">运费单价:</span>
          {{item.unit_price }}
        </div>
        <div class="text item">
          <span class="label">发货重量:</span>
          {{item.kg }}
        </div>
        <div class="text item">
          <span class="label">卸货重量:</span>
          {{item.unloading_weight }}
        </div>
      </div>
    </el-card>

    <!-- 银行信息 -->
    <el-card
      v-if="polyInfo && polyInfo.nhk"
      class="box-card"
      style="background:linear-gradient(-113deg,#c543d8,#925cc3)"
    >
      <div slot="header" class="clearfix" @click="checkDetail('bank')">
        <span>银行信息</span>
        <span class="statusDesc">{{statusMap.nhk[polyInfo.nhk.nhk_status]}}</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="nhkItem">
        <span class="label">银行名:</span>
        {{polyInfo.nhk.bank_name }}
      </div>
      <div class="nhkItem">
        <span class="label">银行账号:</span>
        {{polyInfo.nhk.bank_number }}
      </div>
      <div class="nhkItem">
        <span class="label">收款人:</span>
        {{polyInfo.nhk.person }}
      </div>
    </el-card>

    <!-- 空司机信息 -->
    <el-card
      class="box-card"
      v-if="!polyInfo"
      style="background:linear-gradient(-125deg,#57bdbf,#2f9de2)"
    >
      <div slot="header" class="clearfix">
        <span>司机信息</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="main">——</div>
    </el-card>

    <!-- 空车辆信息 -->
    <el-card
      v-if="!polyInfo || polyInfo.car.car_status == -1"
      class="box-card"
      style="background:linear-gradient(-113deg,#4169E1,#4169E1)"
    >
      <div slot="header" class="clearfix carHeader">
        <span style="flex:1">车辆信息</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="main">——</div>
    </el-card>

    <!-- 空运单信息 -->
    <el-card
      class="box-card"
      v-if="!polyInfo || polyInfo.bill.length == 0"
      style="background:linear-gradient(-125deg,#ff7d7d,#fb2c95)"
    >
      <div slot="header" class="clearfix">
        <span>运单信息</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="main">——</div>
    </el-card>

    <!-- 空银行信息 -->
    <el-card
      v-if="!polyInfo || !polyInfo.nhk"
      class="box-card"
      style="background:linear-gradient(-141deg,#ecca1b,#f39526)"
    >
      <div slot="header" class="clearfix">
        <span>银行信息</span>
      </div>
      <div class="main">——</div>
    </el-card>
  </div>
</template>

<script>
import { getUserId } from "@/utils/auth";
import { getUserAuthority } from "@/api/set";
export default {
  name: "ResultPanel",
  props: {
    polyInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      carIndex: 0,
      billIndex: 0,
      statusMap: {
        bill: {
          0: "待提货",
          1: "拒绝",
          2: "确认",
          3: "运输中",
          4: "完成",
          5: "待结算",
          6: "已结算",
          7: "结算失败"
        },
        car: {
          "-1": "未提交",
          0: "待审核",
          1: "已通过",
          2: "拒绝",
          3: "证件过期"
        },
        driver: {
          "-1": "未提交",
          0: "待审核",
          1: "已通过",
          2: "拒绝",
          3: "证件过期"
        },
        nhk: {
          0: "未设置银行卡",
          1: "已设置银行卡"
        }
      }
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
    },
    changeCarIndex(type) {
      if (type == "reduce") {
        //减少
        if (this.carIndex > 0) {
          this.carIndex--;
        
        } else {
          this.carIndex = 0;
        }
        this.cphVal = this.polyInfo.car[this.carIndex].cph;
      }
      if (type == "add") {
        //增加
        if (this.carIndex < this.polyInfo.car.length - 1) {
          this.carIndex++;
        } else {
          this.carIndex = this.polyInfo.car.length - 1;
        }
        this.cphVal = this.polyInfo.car[this.carIndex].cph;
      }
    },
    changeBillIndex(type) {
      if (type == "reduce") {
        //减少
        if (this.billIndex > 0) {
          this.billIndex--;
        } else {
          this.billIndex = 0;
        }
      }
      if (type == "add") {
        //增加
        if (this.billIndex < this.polyInfo.bill.length - 1) {
          this.billIndex++;
        } else {
          this.billIndex = this.polyInfo.bill.length - 1;
        }
      }
    },
    async checkDetail(type) {
      let userId = getUserId();
      let roleList = {
        driver: true,
        car: true,
        bill: true,
        bank:true
      };
      if (userId == this.$superId) {
        //超级管理员随便看
      } else {
        //普通用户 获取权限来进行匹配
        let result = await getUserAuthority({
          user_id: this.userId
        });
        if (result.code == 200) {
          let admin_role = JSON.parse(result.data.admin_role);
          console.log('admin_role',admin_role);
          
          let child1 = admin_role.driverCarManager.children;
          let child2 = admin_role.waybillManagement.children;
          let child3 = admin_role.moneyManagment.children;
          if (
            child1.find(
              item => item.name == "driverAuditing" && item.status != 1
            )
          ) {
            roleList.driver = false;
          }
          if (
            child1.find(item => item.name == "carAuditing" && item.status != 1)
          ) {
            roleList.car = false;
          }
          if (
            child2.find(item => item.name == "trackList" && item.status != 1)
          ) {
            roleList.bill = false;
          }
          if (
            child3.find(item => item.name == "driverStream" && item.status != 1)
          ) {
            roleList.bank = false;
          }
        }
      }

      if (type == "driver") {
        //跳转司机审核页
        if (roleList.driver) {
          this.$router.push({
            name: "driverAuditing",
            query: {
              name: this.polyInfo.driver.driver_name,
              phone: this.polyInfo.driver.detail.tel
            }
          });
        } else {
          this.$message.error("暂无司机查看权限!");
        }
      }
      if (type == "car") {
        //跳转车辆审核页
        if (roleList.car) {
          this.$router.push({
            name: "carAuditing",
            query: {
              name: this.polyInfo.driver.driver_name,
              cph: this.polyInfo.car[this.carIndex].cph
            }
          });
        } else {
          this.$message.error("暂无车辆查看权限!");
        }
      }
      if (type == "bill") {
        //跳转车辆审核页
        if (roleList.bill) {
          this.$router.push({
            name: "trackList",
            query: {
              add_id: this.polyInfo.bill[this.billIndex].add_id,
              id: this.polyInfo.bill[this.billIndex].id
            }
          });
        } else {
          this.$message.error("暂无运单查看权限!");
        }
      }
      if (type == "bank") {
        //跳转车辆审核页
        if (roleList.bank) {
          this.$router.push({
            name: "driverStream",
            query: {
              name: this.polyInfo.driver.driver_name,
              bank: this.polyInfo.nhk.person
            }
          });
        } else {
          this.$message.error("暂无银行查看权限!");
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.ResultPanel {
  display: flex;
  flex-wrap: wrap;
  .box-card {
    border-radius: 20px;
    color: #fff;
    width: 47%;
    height: 300px;
    margin-left: 30px;
    // margin-right: 40px;
    margin-bottom: 40px;
    .clearfix {
      font-weight: bold;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      .statusDesc {
        float: right;
        line-height: 40px;
        font-weight: 400;
      }
    }
    .carHeader {
      display: flex;
      justify-content: space-between;
      .switch {
        user-select: none;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        .pointer {
          font-family: bold;
          font-size: 18px;
          margin: 5px;
          padding-bottom: 3px;
        }
      }
    }
  }
  ::v-deep .el-select {
    width: 100px !important;
    // height: 20px !important;
  }
  ::v-deep .el-input__inner {
    background-color: transparent;
    outline: none;
    border: none;
    color: #fff;
    padding: 0;
    font-weight: bold;
    font-size: 16px;
    // height: 20px;

  }
  ::v-deep .el-select .el-input .el-select__caret{
    color: #fff;
  }
  ::v-deep .el-input__suffix {
    right: 0;
    // height: 25px;
    // top: 5px;
  }
  ::v-deep .el-card__body {
    height: calc(300px - 60px);
    .main {
      // height: 100%;
      padding: 10px 0;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      .label {
        // width: 80px;
        display: inline-block;
        text-align: right;
        margin-right: 5px;
        margin-bottom: 5px;
      }
      .text {
        width: 30%;
        margin-right: 15px;
        margin-bottom: 20px;
      }
      .overText {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .nhkItem {
      font-size: 14px;
      margin-bottom: 20px;
    }
  }
}
</style>
